<template>
  <div>
    <el-drawer
      custom-class="wxkj-drawer forward-drawer"
      :title="'将' + name + '的简历转发给同事'"
      :visible.sync="drawerShow"
      :before-close="drawerClose"
      size="500"
    >
      <div class="drawer-content">
        <div class="ml20 mb20">应聘职位：{{ jobName }}</div>
        <el-form
          ref="form"
          :model="form"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="转发给同事：" required prop="reUserIds">
            <el-select
              v-model="form.reUserIds"
              multiple
              filterable
			  clearable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in peopleList"
                :key="item.id"
                :label="item.name"
                :value="item.userId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="邮件标题：" required prop="subject">
            <el-input v-model="form.subject" placeholder="" />
          </el-form-item>

          <el-form-item label="邮件正文：">
            <el-input v-model="form.text" type="textarea" placeholder="请填写（选填）" />
          </el-form-item>
          <el-form-item class="fr">
            <el-button @click="drawerClose">取消</el-button>
            <el-button type="primary" @click="submitForm" :loading="submitLoading">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <colleague ref="colleague" />
  </div>
</template>

<script>
import colleague from './dialog/colleague'
import { list } from '@/api/colleague'
import { sendWithFile } from '@/api/personnel'
import { mapState } from 'vuex'
export default {
  components: { colleague },
  data() {
    return {
      peopleList: [],
      drawerShow: false,
        submitLoading: false,
      name: '',
      jobName: '',
      form: {
        reUserIds: [],
        reId: '',
        subject: '',
        text: '',
        jobId: '' // 职位id
      },
      formRules: {
        reUserIds: [{ required: true, message: '请选择接收人' }],
        subject: [{ required: true, message: '请输入标题' }]
      }
    }
  },
  computed: {
    ...mapState({
      companyId: state => state.user.companyId
    })
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
  // 方法
  methods: {
    // 显示
    show(name, jobName, reId, jobId) {
      list(
      {
        companyId: this.companyId,
        pageSize: 1000,
        pageNo: 1
      }
    ).then(res => {
      this.peopleList = res.result.records
    })
      console.log(reId)
      this.name = name
      this.jobName = jobName
      this.form.reId = reId
      this.form.jobId = jobId
      this.drawerShow = true
    },
    // 打开同事信息弹窗
    showColleagueDialog(id) {
      this.$refs.colleague.show('1')
    },
    drawerClose() {
      this.$nextTick(() => {
        this.form =  {
        reUserIds: [],
        reId:'',
        subject:'',
        text:'',
        jobId: ''
      }
        this.$refs.form.resetFields()
      })
      this.drawerShow = false
      this.$emit('refresh')
    },
    // 提交
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
           this.submitLoading = true;
          const form = JSON.parse(JSON.stringify(this.form))
          sendWithFile(form).then((res) => {
            this.$message({
              message: '转发成功',
              type: 'success'
            })
            this.submitLoading = false;
            this.drawerClose()
          }).catch(err => {
                this.submitLoading = false;
              });
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
